<template>
  <div class="app-container">
    <!--搜索框带按钮-->
    <el-col :span="24" :xs="24">
      <el-form :model="selectPoetry" :inline="true">
        <el-form-item label="诗词名称">
          <el-input v-model="selectPoetry.title" style="width: 240px;" placeholder="请输入诗词名称"></el-input>
        </el-form-item>

        <el-form-item label="作者朝代">
          <el-select v-model="selectPoetry.dynasty" placeholder="请选择">
              <el-option
                v-for="item in dict.type.author_dynasty"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="作者名称">
            <el-input v-model="selectPoetry.author" style="width: 240px;" placeholder="请输入作者名称"></el-input>
        </el-form-item>

        <el-form-item label="类型">
          <el-select v-model="selectPoetry.titleType" placeholder="请选择">
              <el-option
                v-for="item in dict.type.poetry_title_type"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:dict:add']"
            >新增</el-button>
            </el-col>
        </el-row>
      </el-form>
      <!--table 数据表-->
      <!-- @selection-change="handleSelectionChange" -->
       <el-table
          :data="AllPoetry"
          tooltip-effect="dark"
          style="width: 100%"
          >
          <el-table-column
            align="center"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="作者名"
            width="120"
            align="center"
            prop="author"
            >
<!--            <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column
            prop="title"
            label="诗名"
            align="center"
            width="280">
          </el-table-column>
          <el-table-column
            prop="dynasty"
            label="朝代"
            align="center"
            width="120">
            <template slot-scope="scope">
              {{detectioncd(scope.row.dynasty)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="titleType"
            label="类型"
            align="center"
            width="120">
            <template slot-scope="scope">
              {{detectionlx(scope.row.titleType)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="creationTime"
            label="创建时间"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="修改时间"
            align="center"
            >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button icon="el-icon-search" circle @click="lookPoetry(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deletePoetory(scope.row.poetryId)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="selectPoetry.pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </el-col>
    <!--dialog-->
    <el-dialog
      :title="prompt"
      :visible.sync="dialogVisible"
      @close=diaAllClose()
      width="60%">
      <div>
        <el-form :model="SelectedPoetry" :rules="rules" ref="ruleForm">
          <el-form-item label="作品名称" prop="title">
            <el-input :disabled="disabled" style="width: 200px;" v-model="SelectedPoetry.title"></el-input>
          </el-form-item>

          <el-form-item label="作品类型" prop="titleType">
            <el-select v-model="SelectedPoetry.titleType" :disabled="disabled" >
              <el-option
                v-for="item in dict.type.poetry_title_type"
                :label="item.label"
                :value="parseInt(item.value)">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="朝代" prop="dynasty">
            <el-select v-model="SelectedPoetry.dynasty" :disabled="disabled" >
              <el-option
                v-for="item in ChaoDai"
                :label="item.label"
                :value="parseInt(item.value)"
                >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="作者" prop="authorId">
            <el-select @change="SelectChange" :disabled="disabled" v-model="SelectedPoetry.authorId" filterable placeholder="请选择">
                <el-option
                  v-for="item in AllAuthor"
                  :label="item.authorName"
                  :value="item.authorId"
                  >
                </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="内容" prop="content">
            <el-input :disabled="disabled" type="textarea" v-model="SelectedPoetry.content" style="width: 600px;"></el-input>
          </el-form-item>

          <el-form-item label="注释">
            <el-input :disabled="disabled" type="textarea" v-model="SelectedPoetry.explanatoryNote" style="width: 400px;"></el-input>
          </el-form-item>


          <el-form-item label="译文">
            <el-input :disabled="disabled" type="textarea" v-model="SelectedPoetry.translation" style="width: 400px;"></el-input>
          </el-form-item>

          <el-form-item label="赏析">
            <el-input :disabled="disabled" type="textarea" v-model="SelectedPoetry.appreciation" style="width: 400px;"></el-input>
          </el-form-item>

          <el-form-item label="创作背景">
            <el-input :disabled="disabled" type="textarea" v-model="SelectedPoetry.creationBackground" style="width: 400px;"></el-input>
          </el-form-item>

          <el-form-item label="背景地址">
            <!--图片上传-->
            <el-upload
              :disabled="disabled"
              class="avatar-uploader"
              action="http://101.43.223.224:8765/image/uploadFile/b2bPlatform"
              :show-file-list="false"
              :on-success="UploadSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="SelectedPoetry.backgroundImg!=null" :src="this.$imageUrl+SelectedPoetry.backgroundImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaClose('ruleForm')">关闭</el-button>
        <el-button type="primary" @click="UpdateStatus()" v-if="disabled==true">修改</el-button>
        <el-button type="primary" @click="InsertUpdate('ruleForm')" v-if="disabled==false">保存</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
  import { PageListPoetry ,DeletePoetry, UpdatePoetry, GetAllAuthor, InsertPoety } from "@/api/poetryLibrary/poetry";
  export default{
    name:"poetry",
    dicts: ['author_dynasty', 'poetry_title_type'],
    data(){
      return{
        rules:{
          title:[{ required: true, message: '作品名称不能为空', trigger: 'blur' }],
          titleType:[{ required: true, message: '类型不能为空', trigger: 'blur' }],
          dynasty:[{ required: true, message: '朝代不能为空', trigger: 'blur' }],
          authorId:[{ required: true, message: '作者不能为空', trigger: 'blur' }],
          content:[{ required: true, message: '内容不能为空', trigger: 'blur' }],
        },
        /*
        总页数
        */
        total:undefined,
        /*搜索表单*/
        selectPoetry:{
          //作品名
          title:undefined,
          //作品类型
          titleType:undefined,
          //朝代
          dynasty:undefined,
          //作者
          author:undefined,
          /*当前页*/
          pageNum:1,
          /*一页的数量*/
          pageSize:10,
        },
        /*诗词*/
        AllPoetry:[],
        //朝代列表
        ChaoDai:[],
        //作品类型
        ZuoPingType:[],
        //遮罩状态
        dialogVisible: false,
        //禁用属性
        disabled:true,
        //查看修改的对象
        SelectedPoetry:{},
        //作者列表
        AllAuthor:[],
        //点击按钮后的提示字段
        prompt:'',
      }
    },
    created(){
      this.ChaoDai=this.dict.type.author_dynasty
      this.ZuoPingType=this.dict.type.poetry_title_type
      this.getList()
    },
    methods:{
      /*查询所有诗词*/
      getList(){
        PageListPoetry(this.selectPoetry).then(resp=>{
          if(resp.code==200){
            this.total=resp.data.totalSize
            this.AllPoetry=resp.data.content
          }
        })
      },
      /*点击按钮时*/
      handleQuery(){
        this.selectPoetry.pageNum=1
        this.getList()
      },
      /*重置按钮*/
      resetQuery(){
        this.selectPoetry={};
        this.resetForm("selectPoetry");
      },
      /*朝代判断*/
      detectioncd(cd){
        var newCd="数据未定义";
        this.ChaoDai.forEach(function(item,index){
          if(item.value==cd){
            newCd=item.label
          }
        })
        return newCd
      },
      /*detectionlx   诗词类型判断*/
      detectionlx(lx){
        var newLx="数据未定义";
        this.ZuoPingType.forEach(function(item,index){
          if(item.value==lx){
            newLx=item.label
          }
        })
        return newLx
      },
      /*点击页面时*/
      handleCurrentChange(currentPage){
        this.selectPoetry.pageNum=currentPage;
        this.getList()
      },
      //查看详细信息
      lookPoetry(row){
        this.SelectedPoetry=row
        this.dialogVisible=true
        this.disabled=true
        this.prompt="查看诗词"
        this.getAllauthor()
      },
      //修改按钮点击改变状态
      UpdateStatus(){
        this.prompt="修改诗词"
        this.disabled=false;
      },
      //图片上传成功后的操作
      UploadSuccess(res, file) {
        this.SelectedPoetry.backgroundImg = res.data;
      },
      //图片上传之前的操作
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
        },
        //修改 添加 诗词信息
        InsertUpdate(formName){
           this.$refs[formName].validate((valid)=>{
             //验证成功后
            if(valid){
              if(this.prompt=="新增诗词"&&this.SelectedPoetry.poetryId==null){
                InsertPoety(this.SelectedPoetry).then(resp=>{
                  if(resp.data=="SAVE_OK"){
                    this.$message({
                      message: '添加成功',
                      type: 'success'
                    })
                    this.getList()
                    this.disabled=true;
                    this.dialogVisible=false
                  }else{
                    this.$message({
                      message: resp.data,
                      type: 'warning'
                    })
                  }
                  this.getList()
                }).catch(message=>{
                  this.$message({
                    message: message,
                    type: 'warning'
                  })
                })
              }else{
                //修改操作
                UpdatePoetry(this.SelectedPoetry).then(resp=>{                if(resp.data=='UPDATE_OK'){                  this.$message({                    message: '修改成功',                    type: 'success'                  })
                  this.getList()
                  this.disabled=true;
                  this.dialogVisible=false                }else{                  this.$message({                    message: '修改失败',                    type: 'warning'                  })                }              }).catch(message=>{                this.$message({                  message: message,                  type: 'warning'                })              })
              }
            }else{
              return false
            }
          })
        },
        //关闭弹窗后刷新页面
        diaClose(formName){
          this.$refs[formName].clearValidate()//移除校验结果并重置字段值
          this.dialogVisible = false
          this.disabled=true
          this.getList()
        },
        //删除诗词
        deletePoetory(id){
          DeletePoetry({id:id}).then(resp=>{
            if(resp.data=='DELETE_OK'){
              this.$message({
                       message: '删除成功',
                       type: 'success'
              })
              this.getList()
            }else{
              this.$message({
                       message: '删除失败',
                       type: 'warning'
              })
              this.getList()
            }
          }).catch((message) => {
            this.$message({
                     message: message,
                     type: 'warning'
            })
            this.getList()
          })
        },
        ///查询所有作者
        getAllauthor(){
          GetAllAuthor().then(resp=>{
            this.AllAuthor=resp.data
            console.log(this.AllAuthor)
          })
        },
        //选中作者出现变化时
        SelectChange(value){
          var name
          this.AllAuthor.forEach(function(item,index){
            if(item.authorId==value){
              name=item.authorName
            }
          })
          this.SelectedPoetry.author=name
          console.log(this.SelectedPoetry)
        },
        //添加按钮点击时
        handleAdd(){
          this.prompt="新增诗词"
          this.SelectedPoetry={"backgroundImg":null}
          console.log(this.SelectedPoetry)
          this.disabled=false
          this.dialogVisible=true
          this.getAllauthor()
        },
        //diaClose关闭时操作
        diaAllClose(){
          this.$refs['ruleForm'].clearValidate()//移除校验结果并重置字段值
          this.getList()
        }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
